<template>
    <div class="login">
        <div class="loginTop">欢迎登录</div>
        <div class="loginContent">
            <input type="text" name="phone" class="phone" placeholder="请输入手机号码" v-model="phone">
            <input type="text" name="password" class="password" placeholder="请输入密码" v-model="password">
            <button class="btn" @click="Login">登录</button>
        </div>
    </div>
</template>

<script>
import { defineComponent } from 'vue'

import { getLoginUser } from '@/request/api/home'

export default defineComponent({
    data() {
        return {
            phone: '',
            password: ''
        }
    },
    methods: {
        async Login() {
            let res = await this.$store.dispatch('getLogin', { phone: this.phone, password: this.password })
            if (res.data.code === 200) {
                this.$store.commit('updateIsLogin', true)
                this.$store.commit('updataToken', res.data.token)
                let result = await getLoginUser(res.data.account.id)
                console.log(result)
                this.$store.commit('updataUser', result)
                this.$router.push('/infouser')
            } else {
                alert('手机号码或密码错误')
                this.password = ''
            }
        }
    },
})
</script>

<style lang="less" scoped>
.login {
    width: 100%;
    height: 13.34rem;
    padding: .2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: rgb(248, 97, 97);

    .loginTop {
        width: 100%;
        height: 3rem;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: .6rem;
        color: #fff;
    }

    .loginContent {
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 2rem 0;

        .phone {
            width: 80%;
            height: 30px;
            margin-bottom: .5rem;
            border-radius: 20px;
        }

        .password {
            width: 80%;
            height: 30px;
            margin-bottom: .5rem;
            border-radius: 20px;

        }

        .btn {
            width: 40%;
            height: .6rem;
            border-radius: 20px;

        }
    }
}
</style>